<template>
  <div class="model-manager-container">
    
    <!-- 知识抽取模型表格 -->
    <div class="model-section">
      <h2 style="text-align: left;">知识抽取模型</h2>
      <el-table :data="extractionModels" border stripe style="width: 100%" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center', backgroundColor: '#f5f7fa'}">
        <el-table-column prop="batchNum" label="当前批次" min-width="120"></el-table-column>
        <el-table-column prop="avgLoss" label="平均损失" min-width="120"></el-table-column>
        <el-table-column prop="precision" label="精确率" min-width="120"></el-table-column>
        <el-table-column prop="recall" label="召回率" min-width="120"></el-table-column>
        <el-table-column prop="f1" label="F1" min-width="120"></el-table-column>
        <el-table-column label="操作" min-width="220">
          <template v-if="extractionModels.length > 0">
            <el-button size="small" type="primary" @click="trainModel('extraction', extractionModels[0])">模型训练</el-button>
            <el-button size="small" type="success" @click="applyModel('extraction', extractionModels[0])">模型应用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 知识融合模型表格 -->
    <div class="model-section">
      <h2 style="text-align: left;">知识融合模型</h2>
      <el-table :data="fusionModels" border stripe style="width: 100%" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center', backgroundColor: '#f5f7fa'}">
        <el-table-column prop="epochNum" label="当前轮数" min-width="120"></el-table-column>
        <el-table-column prop="batchNum" label="当前批次" min-width="120"></el-table-column>
        <el-table-column prop="avgLoss" label="平均损失" min-width="120"></el-table-column>
        <el-table-column prop="precision" label="精确率" min-width="120"></el-table-column>
        <el-table-column prop="recall" label="召回率" min-width="120"></el-table-column>
        <el-table-column prop="f1" label="F1" min-width="120"></el-table-column>
        <el-table-column label="操作" min-width="220">
          <template v-if="fusionModels.length > 0">
            <el-button size="small" type="primary" @click="trainModel('fusion', fusionModels[0])">模型训练</el-button>
            <el-button size="small" type="success" @click="applyModel('fusion', fusionModels[0])">模型应用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 可信评估模型表格 -->
    <div class="model-section">
      <h2 style="text-align: left;">可信评估模型</h2>
      <el-table :data="trustModels" border stripe style="width: 100%" :cell-style="{textAlign: 'center'}" :header-cell-style="{textAlign: 'center', backgroundColor: '#f5f7fa'}">
        <el-table-column prop="epochNum" label="当前轮数" min-width="120"></el-table-column>
        <el-table-column prop="batchNum" label="当前批次" min-width="120"></el-table-column>
        <el-table-column prop="avgLoss" label="平均损失" min-width="120"></el-table-column>
        <el-table-column prop="precision" label="精确率" min-width="120"></el-table-column>
        <el-table-column prop="recall" label="召回率" min-width="120"></el-table-column>
        <el-table-column prop="f1" label="F1" min-width="120"></el-table-column>
        <el-table-column label="操作" min-width="220">
          <template v-if="trustModels.length > 0">
            <el-button size="small" type="primary" @click="trainModel('trust', trustModels[0])">模型训练</el-button>
            <el-button size="small" type="success" @click="applyModel('trust', trustModels[0])">模型应用</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    
    <!-- 训练进度对话框 -->
    <el-dialog v-model="trainingDialogVisible" title="模型训练进度" width="50%" >
      <div class="training-progress">
        <el-progress :percentage="trainingProgress" :format="progressFormat"></el-progress>
        <div class="status-message">{{ trainingStatusMessage }}</div>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="trainingDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="completeTraining">完成</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import axios from 'axios'

// 数据模型
const extractionModels = ref([
  { batchNum: '', avgLoss: '', precision: '', recall: '', f1: '' }
])

const fusionModels = ref([
  { epochNum: '', batchNum: '', avgLoss: '', precision: '', recall: '', f1: '' }
])

const trustModels = ref([
  { epochNum: 5, batchNum: '2/200', avgLoss: 1.223, precision: '75.9', recall: '73.2', f1: 74.5 }
])

// 训练状态
const trainingDialogVisible = ref(false)
const trainingProgress = ref(0)
const trainingStatusMessage = ref('')
const currentModelType = ref('')
const currentModel = ref(null)

// 模拟训练进度
const simulateTraining = () => {
  trainingProgress.value = 0
  trainingStatusMessage.value = '初始化训练环境...'
  
  const interval = setInterval(() => {
    if (trainingProgress.value < 100) {
      trainingProgress.value += 10
      
      // 根据进度更新状态消息
      if (trainingProgress.value < 20) {
        trainingStatusMessage.value = '加载数据集...'
      } else if (trainingProgress.value < 40) {
        trainingStatusMessage.value = '预处理数据...'
      } else if (trainingProgress.value < 70) {
        trainingStatusMessage.value = `正在训练${getModelTypeName(currentModelType.value)}模型...`
      } else if (trainingProgress.value < 90) {
        trainingStatusMessage.value = '评估模型性能...'
      } else {
        trainingStatusMessage.value = '训练完成，准备应用模型...'
      }
    } else {
      clearInterval(interval)
    }
  }, 500)
}

// 格式化进度百分比
const progressFormat = (percentage) => {
  return percentage === 100 ? '完成' : `${percentage}%`
}

// 获取模型类型名称
const getModelTypeName = (type) => {
  const typeNames = {
    'extraction': '知识抽取',
    'fusion': '知识融合',
    'trust': '可信评估'
  }
  return typeNames[type] || '未知'
}

// 训练模型
const trainModel = (type, model) => {
  currentModelType.value = type
  currentModel.value = model
  trainingDialogVisible.value = true
  simulateTraining()
  
  // 实际应用中，这里应该调用后端API开始训练
  console.log(`开始训练${getModelTypeName(type)}模型:`, model)
}

// 应用模型
const applyModel = (type, model) => {
  ElMessageBox.confirm(
    `确定要应用这个${getModelTypeName(type)}模型吗？`,
    '应用确认',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 实际应用中，这里应该调用后端API应用模型
    console.log(`应用${getModelTypeName(type)}模型:`, model)
    ElMessage({
      type: 'success',
      message: `${getModelTypeName(type)}模型应用成功!`,
    })
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '已取消应用',
    })
  })
}

// 完成训练
const completeTraining = () => {
  if (trainingProgress.value >= 100) {
    // 更新模型信息
    if (currentModelType.value === 'extraction') {
      extractionModels.value[0] = {
        batchNum: '1000',
        avgLoss: '0.0035',
        precision: '92.5%',
        recall: '89.3%',
        f1: '0.91'
      }
    } else if (currentModelType.value === 'fusion') {
      fusionModels.value[0] = {
        epochNum: '10',
        batchNum: '1000',
        avgLoss: '0.0028',
        precision: '92.1%',
        recall: '88.9%',
        f1: '0.90'
      }
    } else if (currentModelType.value === 'trust') {
      trustModels.value[0] = {
        epochNum: 16,
        batchNum: 1600,
        avgLoss: 0.0025,
        precision: '93.2%',
        recall: '89.7%',
        f1: 0.91
      }
    }
    
    ElMessage({
      type: 'success',
      message: `${getModelTypeName(currentModelType.value)}模型训练完成!`,
    })
    
    trainingDialogVisible.value = false
  } else {
    ElMessage({
      type: 'warning',
      message: '训练尚未完成，请等待或取消训练',
    })
  }
}

onMounted(() => {
  // 加载模型数据
  console.log('模型管理页面加载完成')
  // 实际应用中，这里应该从后端API获取模型数据
})
</script>

<style scoped>
.model-manager-container {
  padding: 20px;
  max-width: 1400px;
  margin: 0 auto;
}

.model-section {
  margin-bottom: 30px;
  background-color: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.model-section h2 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 18px;
  color: #303133;
  font-weight: 500;
  border-left: 4px solid #409EFF;
  padding-left: 10px;
}

.training-progress {
  padding: 20px 0;
}

.status-message {
  margin-top: 20px;
  color: #606266;
  font-size: 14px;
  text-align: center;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
}

.table-with-buttons {
  display: flex;
  flex-direction: column;
}

.model-buttons {
  display: flex;
  justify-content: center;
  margin-top: 15px;
  gap: 10px;
  padding: 10px 0;
  background-color: #f8f9fa;
  border-radius: 0 0 4px 4px;
  border: 1px solid #dcdfe6;
  border-top: none;
}

.model-buttons .el-button {
  min-width: 100px;
}

/* 添加自定义表格样式 */
:deep(.el-table .cell) {
  padding: 0 12px;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

:deep(.el-table__header) {
  font-weight: bold;
}

:deep(.el-table .el-button) {
  padding: 8px 16px;
}

:deep(.el-table) {
  margin-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

:deep(.el-table__cell) {
  vertical-align: middle;
}
</style>
